<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  

    <style type="text/css">
        #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
        border:1px solid #ccc;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 10px arial,tahoma,sans-serif;
    }
    
    </style>
    <link rel="stylesheet" type="text/css" href="<c:url value="/styles/ext-all.css"/>" />
    <title>LiveGrid example</title>
    
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
  </head>
  <body   style="overflow: hidden">
  <div id="account-grid" style=""></div>
  <div id="loading">
    <div class="loading-indicator"><img src="<c:url value="/images/default/shared/large-loading.gif"/>" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>JPetstore Pimped - 1.0 <br /><span id="loading-msg">Loading styles and images...</span></div>
</div>
  
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
  	<script type="text/javascript" src="<c:url value="/script/ext/ext-base.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
	<script type="text/javascript" src="<c:url value="/script/ext/ext-all-debug.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading DWR Components...';</script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/DwrClinic.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrProxy.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/DateTime.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrDataReader.js"/>" ></script>

    <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading LiveGrid Components...';</script>
    <!-- needed files for the ux  -->
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/livegrid/widgets/grid/BufferedGridView.js"/>"></script>    
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/livegrid/widgets/grid/BufferedRowSelectionModel.js"/>"></script>    
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/livegrid/widgets/grid/BufferedStore.js"/>"></script>    
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/livegrid/widgets/BufferedGridToolbar.js"/>"></script>    
    <script type="text/javascript" src="<c:url value="/script/ext/plugins/livegrid/data/BufferedJsonReader.js"/>"></script>    
    
    <script type="text/javascript">
			Ext.BLANK_IMAGE_URL = '<c:out value="${pageContext.request.contextPath}"/>/images/default/s.gif';
	</script>
  
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
	<script type="text/javascript">
	

Ext.onReady(function() {

    Ext.QuickTips.init();
    
    
    var bufferedDataStore = new Ext.ux.grid.BufferedStore({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findVisitsPagedDefault, ['startDate','endDate','start','limit']),
            bufferSize : 300,
        sortInfo:{field: 'date', direction: "ASC"},
      // remoteSort:true,
    	autoLoad:true,
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	root:'data',
    	totalProperty:'totalResults',
    	fields: ['id','pet.name','pet.owner.displayableName','vet.displayableName','vet.id',
    			{name:'date',type:'date'},'description']}) 
	});     
    
    
    
    var bufferedView = new Ext.ux.grid.BufferedGridView({
            nearLimit      : 100,
            loadMask : {
                msg : 'Please wait...'
    }});          
        var bufferedGridToolbar = new Ext.ux.BufferedGridToolbar({
        view        : bufferedView,
        displayInfo : true
    });
    
    var visitGrid = new Ext.grid.GridPanel({
        id:'visitGrid',
              columns: [
            {id:'id',header: "Id", width:10, sortable: false, dataIndex: 'id',hidden:true},
            {header: "Date", width: 110, sortable: true, renderer:Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'date'},
            {header: "Pet Name", width: 290, sortable: true, dataIndex: 'pet.name'},
            {header: "Owner Name", width: 290, sortable: true, dataIndex: 'pet.owner.displayableName'},
            {header: "Vet Name", width: 290, sortable: true, dataIndex: 'vet.displayableName'},
            {header: "Description", width: 290, sortable: true, dataIndex: 'description'}
        ],
    view:  bufferedView,
    <%--
                tbar: ["From",
				 new Ext.form.DateField({
                                    fieldLabel: 'Start Date',
                                    id:'sd',
                                    name: 'sd',
                                    value:'01/01/70',
                                    allowBlank:false
                                }),
                                "-","To",
                                 new Ext.form.DateField({
                                    fieldLabel: 'End Date',
                                    id:'ed',
                                    name: 'ed',
                                    value:'03/03/08',
                                    allowBlank:false
                                }),                
                "-",
			{xtype:'tbbutton',text:'Search',icon:'../../images/find.png', cls:'x-btn-text-icon',
               handler: function() {  
                 var startdate = Ext.getCmp('sd').getValue();
                 var enddate = Ext.getCmp('ed').getValue();
               visitGrid.getStore().load(
               			{params:{start:0,limit:25,startDate:startdate,endDate:enddate}});
			 }},
            "-",
            { text: "Add New", icon:'../../images/application_form_add.png', cls:'x-btn-text-icon',
            tooltip:"Add a new Visit",
            handler: function() {
			        	var formId = 'visitForm_'+new Date().getTime();
 	            		  // check if the form is already loaded 
			        		// create a new visit form 
			        		PetClinic.app.addVisitForm(formId,null);
			        	 }},
            "-",
            { text: "Edit", disabled:true, id:'editVisitButton', icon:'../../images/application_form_edit.png', cls:'x-btn-text-icon',
            tooltip:"Edit Selected Visit",
            handler: function() {
            			var selModel = visitGrid.getSelectionModel();
            			var thisRow = selModel.getSelected(); 
            			if(!thisRow || !thisRow.id) {
	            			return;
            			}
            			var rowId = thisRow.id; 
            			
			        	var formId = 'visitForm_'+rowId;
 	            		  // check if the form is already loaded 
			        		// create a new visit form 
		        		PetClinic.app.addVisitForm(formId,rowId);
        	}},
            "->" ,
            { text: "Clear", handler: function() { visitGrid.getStore().removeAll(); }}
		],    
		--%>
        loadMask: true,
        stripeRows: true,
        title:'Visits',
        store: bufferedDataStore,
        bbar :bufferedGridToolbar,
        listeners:{rowdblclick:function(grid,rowIndex,evt) {
        		var row = grid.getView().getRow(rowIndex);
        	},
	        rowcontextmenu:function(grid, rowIndex,evt) {
	        	evt.preventDefault();
	        	visitGridMenu.showAt(evt.getXY());
	        }
        
        },
        sm: new Ext.ux.grid.BufferedRowSelectionModel({
	                singleSelect: true
	      })    	
        
    });
    
    var win = new Ext.Window({
         width:800
        ,id:'winid'
        ,height:300
        ,layout:'fit'
        ,border:false
        ,closable:false
        ,title:'Ext.ux.form.LiveGrid Example'
        ,items:[visitGrid]
    });
    win.show();
 	
	Ext.get('loading').hide(true);

});	

	</script>
  
  </body>
  </html>
  